<template>
  <div style="width:100%">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick"></editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
// --------------------插入引入--------------------
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/link' // 超链接插件
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/contextmenu' // 右键菜单插件
import 'tinymce/plugins/colorpicker' // 选择颜色插件
import 'tinymce/plugins/textcolor' // 文本颜色插件
import 'tinymce/plugins/fullscreen' // 全屏
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/toc'
import '@/assets/tinyMce/langs/zh_CN.js'
import { uploadFileForEditorPic } from '@/api/upLoad'

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    // 定义为显示模式
    disabled: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 500
    }
  },
  data () {
    return {
      myValue: this.value,
      init: {
        selector: 'Editor', // 选择HTML元素
        language: 'zh_CN', // 语言设置
        readonly: true,
        inline: this.disabled,
        disabled: this.disabled, // 禁用
        base_url: '/tinymce',
        height: this.height, // 高度
        menubar: false, // 隐藏最上方menu菜单
        browser_spellcheck: true, // 拼写检查
        branding: false, // 去水印
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        plugins:
          'lists image media table fullscreen toc  insertdatetime visualchars visualblocks searchreplace  link charmap paste preview hr anchor',

        toolbar: [
          'newdocument undo  redo | formatselect | fontselect |fontsizeselect| lineheight visualaid cut copy paste selectall| hr bold italic underline strikethrough |codeformat blockformats|superscript subscript|forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | removeformat bullist numlist | lists image media table link |fullscreen toc  insertdatetime | visualchars visualblocks searchreplace  anchor charmap  preview  '
        ],
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const data = new FormData()
          data.append('file', blobInfo.blob())
          uploadFileForEditorPic(data).then(res => {
            if (this.$constant.SUCCESS === res.code) {
              if (res.data) {
                // 上传代码返回结果之后，将图片插入到编辑器中
                success(res.data)
              }
            }
          })
        }
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    // 需要什么事件可以自己增加
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>
<style>
.tox-notifications-container {
  display: none;
}

.tox-tinymce-aux {
  z-index: 5000 !important;
}
</style>
